{
const hover = vl.selectPoint()
.on('mouseover')
.toggle(false)
.nearest(true);
const click = vl.selectPoint();
const hoverOrClick = vl.or(click.empty(false), hover.empty(false));
const plot = vl.markCircle().encode(
vl.x().fieldQ('Rotten_Tomatoes_Rating'),
vl.y().fieldQ('IMDB_Rating')
);
const base = plot.transform(
vl.filter(hoverOrClick)
);
const halo = {size: 100, stroke: 'firebrick', strokeWidth: 1};
const label = {dx: 4, dy: -8, align: 'right'};
const white = {stroke: 'white', strokeWidth: 2};
return vl.data(movies)
.layer(
plot.params(hover, click),
base.markPoint(halo),
base.markText(label, white).encode(vl.text().fieldN('Title')),
base.markText(label).encode(vl.text().fieldN('Title'))
)
.width(600)
.height(450)
.render();
}